import {Button, Col, Form, Input, Row} from "antd";
import React from "react";

const LoginHtml = (props)=>{
    return (
        <div className={'Login'}>
            <div className={'form'} ref={props.formRefDiv}>
                <div className={'title'}>{props.isLogin?'LOGIN':'FORGET PASSWORD'}</div>
                <Form name={'formState'} form={props.formRef} initialValues={props.formValue}>
                    <Form.Item name="username" rules={props.rules.username}>
                        <Input value={props.formValue.username} onChange={props.setState('username')} placeholder={`请输入${props.isLogin?'用户名':'手机号'}`}></Input>
                    </Form.Item>
                    <Form.Item name="password" rules={props.rules.password}>
                        <Input.Password value={props.formValue.password} onChange={props.setState('password')} placeholder={`请输入${props.isLogin?'':'新'}密码`}></Input.Password>
                    </Form.Item>
                    <Form.Item name="code" rules={props.rules.code}>
                        <Row gutter={16}>
                            <Col span={18}>
                                <Input value={props.formValue.code} onChange={props.setState('code')} placeholder={'请输入验证码'}></Input>
                            </Col>
                            <Col span={6}><Button style={{width: '100%'}}>发送验证码</Button></Col>
                        </Row>
                    </Form.Item>
                    <Button onClick={props.isLogin?props.login:props.forgetPassword} style={{width: '100%'}} type={'primary'}>{props.isLogin?'登录':'修改密码'}</Button>
                </Form>
                <div style={{textAlign: 'right'}}>
                    <span onClick={props.changeView} className={'forgetPassword'}>{props.isLogin?'忘记密码':'去登陆'}</span>
                </div>
            </div>
        </div>
    )
}
export default LoginHtml